<template>
	<view class="list" v-if="list.length">
		<view class="list_item" v-for="(item, index) in list" :key="index" @click="toBuy(item)">
			<view class="list_item_left">
				<view class="list_item_left_img">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="list_item_left_avatar">
					<image :src="ems" mode="" v-for="(ems, eindex) in item.userimgurl" :key="eindex"></image>
				</view>
				<view class="list_item_left_time" v-if="item.countdown && item.countdown != '00:00:00'">
					End in {{ item.countdown }}
				</view>
			</view>
			<view class="list_item_right">
				<view class="list_item_right_title">
					{{ item.name }}
				</view>
				<view class="list_item_right_content m_top20">
					<view class="list_item_right_linepro_gress">
						<lineprogress :percent="item.progress * 100"></lineprogress>
					</view>
					<view class="list_item_right_linepro_num">
						{{ item.all_buy_num }}/{{ item.max_buy }}
					</view>
				</view>
				<view class="list_item_right_content m_top20">
					<view class="list_item_right_content_total">
						<text class="c_title">
							{{ $t('finance.amount') }}:
						</text>
						<text class="c_main">
							{{ $currency }}{{ item.amount }}
						</text>
					</view>
				</view>
				<view class="list_item_right_content">
					<view class="list_item_right_content_total">
						<text class="c_title">
							{{ $t('finance.uprice') }}:
						</text>
						<text class="c_main">
							{{ $currency }}{{ item.price }}
						</text>
					</view>
				</view>
				<view class="list_item_right_content">
					<view class="list_item_right_content_total">
						<text class="c_title">
							{{ $t('finance.rate') }}:
						</text>
						<text class="c_main">
							{{ item.rate }} %
						</text>
					</view>
				</view>
				<view class="list_item_right_content">
					<view class="list_item_right_content_total">
						<text class="c_title">
							{{ $t('finance.due') }}:
						</text>
						<text class="c_main">
							{{ item.day }} {{ $t('finance.day') }}
						</text>
					</view>
				</view>
				<view class="list_item_right_joined">
					{{ item.usernumber }} {{ $t('finance.joined') }}
				</view>
			</view>
			<view class="list_item_btn" @click="toBuy(item)">
				<text>{{ $t('home.snatch') }}</text>
				<image src="@/static/image/home/icon_RightArrow.png" mode=""></image>
			</view>
			<view class="list_item_finish" v-if="item.status == 2">
				<image src="@/static/image/finance/img_Soldout.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data () {
			return {
				timer: null
			}
		},
		methods: {
			toBuy(item) {
				this.$emit('buy',item)
			}
		},
		mounted() {
			this.timer = setInterval(() => {
				this.$forceUpdate()
			},1000)
		},
		destroyed() {
			clearInterval(this.timer)
		}
		
	}
</script>

<style lang="scss" scoped>
	.list {
		width: 100%;
		font-family: Roboto, Roboto-Medium;
		
		.list_item {
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			margin: 28rpx;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #f5f5f5;
			position: relative;
			.list_item_left {
				flex-shrink: 0;
				max-width: 184rpx;
				position: relative;
				
				.list_item_left_img {
					width: 184rpx;
					height: 184rpx;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				.list_item_left_avatar {
					margin-top: 8rpx;
					margin-left: 10rpx;
					padding-left: 4rpx;
					
					image {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						margin-left: -10rpx;
						overflow: hidden;
					}
				}
				
				.list_item_left_time {
					padding: 0 4rpx;
					width: 100%;
					height: 38rpx;
					line-height: 38rpx;
					background: #90b9ff;
					border-radius: 20rpx 20rpx 0 0;
					font-size: 24rpx;
					font-family: Roboto, Roboto-Medium;
					font-weight: 500;
					color: #ffffff;
					position: absolute;
					left: 0;
					top: 148rpx;
					white-space: nowrap;
					text-align: center;
				}
			}
			.list_item_right {
				// width: 100%;
				margin-left: 44rpx;
				// border: 1px solid red;
				
				.list_item_right_title {
					max-width: 440rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					letter-spacing: 0rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				
				.m_top20 {
					margin-top: 20rpx;
				}
				
				.list_item_right_content {
					display: flex;
					align-items: center;
					
					.list_item_right_linepro_gress {
						width: 100%;
						padding-right: 24rpx;
					}
					.list_item_right_linepro_num {
						font-size: 28rpx;
						font-weight: 500;
						color: #b9b9b9;
						letter-spacing: 0rpx;
					}
					
					.list_item_right_content_total {
						// width: 50%;
						font-size: 24rpx;
						line-height: 36rpx;
						letter-spacing: 0rpx;
						// overflow: hidden;
						// text-overflow: ellipsis;
						// white-space: nowrap;
						
						.c_title {
							font-weight: 700;
							color: #b9b9b9;
						}
						.c_main {
							margin-left: 6rpx;
							font-weight: 400;
							color: #FF5C5C;
						}
					}

				}
				
				.list_item_right_joined {
					font-size: 24rpx;
					font-weight: 700;
					color: #b9b9b9;
					line-height: 36rpx;
					letter-spacing: 0rpx;
					margin-top: 26rpx;
				}

			}
			
		}
		
		.list_item_btn {
			position: absolute;
			bottom: 68rpx;
			right: 0;
			min-width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: linear-gradient(115deg,#ffe44b 0%, #fea326 100%);
			border-radius: 8rpx;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(255,125,0,0.50) inset; 
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 10rpx;
			
			image {
				width: 28rpx;
				height: 28rpx;
				margin-left: 10rpx;
			}
			
			text {
				font-size: 28rpx;
				font-family: DIN, DIN-Medium;
				font-weight: 500;
				color: #ad6701;
			}
		}
		.list_item_finish {
			width: 118rpx;
			height: 132rpx;
			position: absolute;
			left: 0;
			top: -28rpx;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
